<template>
	<view class="back">
		<u-row justify="center" align="center">
			<u-col span="3" justify="center" align="center">
				<view style="text-align: center; margin-top: 30upx;">
					<view class="text-top">{{name_pub}}</view>
					<image :src="pic_src" class="pic"></image>
					<view class="text-down">{{name_role}}</view>
				</view>
			</u-col>
			<u-col span="5">
				<text class="verticalBar-left"></text>
				<text class="mid-text">想演：</text>
				<text class="mid-text-name">{{script_title}}</text>
				<text class="mid-text-intro">{{script_intro}}</text>
			</u-col>
			<u-col span="4">
				<!-- <view class="grid-text">招募中</view> -->
				<text class="verticalBar-right"></text>
				<image :src="zhaomu_src" class="zhaomuzhong"></image>
				<text class="word">招募中</text>

			</u-col>
		</u-row>
	</view>
</template>

<script>
	export default {
		name: "zhaomuBlock",
		props: {
			pic_src: {
				type: String,
				default: "/static/zhaomu/R-C.png"
			},
			zhaomu_src: {
				type: String,
				default: "/static/zhaomu/zhaomuzhong-background-zhaomu.jpg"
			},
			name_pub: {
				type: String,
				default: "Ti"
			},
			name_role: {
				type: String,
				default: "花"
			},
			script_title: {
				type: String,
				default: "乡村爱情故事"
			},
			script_intro: {
				type: String,
				default: "阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴"
			},
		}
	}
</script>

<style>
	.back {
		background-color: #ffe7f2;
		height: 130px;
		width: 98%;
		margin: 0 auto;
	}

	.text-top {
		font-size: 30upx;
	}

	.text-down {
		font-size: 50%;
		margin: auto;
	}

	.mid-text {
		font-size: 50%;
		position: absolute;
		margin-left: 15px;
		margin-top: 15px;
	}

	.mid-text-name {
		font-size: 50%;
		position: absolute;
		margin-left: 15px;
		margin-top: 35px;
	}

	.mid-text-intro {
		font-size: 50%;
		position: absolute;
		margin-left: 15px;
		width: 30%;
		margin-top: 60px;
	}

	.pic {
		width: 40px;
		height: 40px;
		margin-top: 10px;
		margin-bottom: 10px;
		border-radius: 50%;
	}

	.verticalBar-left {
		width: 1px;
		height: 75px;
		background: #ffb0dd;
		display: inline-block;
		vertical-align: top;
		margin-top: 30px;
	}

	.verticalBar-right {
		width: 1px;
		height: 75px;
		background: #ffb0dd;
		display: inline-block;
		vertical-align: top;
		margin-top: 30px;
	}

	.zhaomuzhong {
		width: 70px;
		height: 60px;
		position: absolute;
		margin-left: 43upx;
		margin-top: 2px;
	}

	.word {
		font-size: 50%;
		position: absolute;
		margin-left: 85upx;
		margin-top: 23px;
		width: 70px;
		height: 60px;
		color: #ffffff;
	}
</style>
